<template>
	<view class="container">
		<view class="top-box">
			<view class="search-box">
				<view class="select-box">
					<view class="select-lable">
						<picker @change="yearChange" :range="yearList" :value="yearIndex">
							<view class="uni-input">{{yearList[yearIndex]}}</view>
						</picker>
					</view>
					<image class="select-arrow" src="../../static/images/XIA.png"></image>
				</view>
				<view class="v-line"></view>
				<view class="select-box">
					<view class="select-lable">
						<picker @change="typeChange" :range="typeList" :value="typeIndex">
							<view class="uni-input">{{typeList[typeIndex]}}</view>
						</picker>
					</view>
					<image class="select-arrow" src="../../static/images/XIA.png"></image>
				</view>
				<view class="v-line"></view>
				<view class="input-result-box">
					<view class="input-box">
						<input type="number" maxlength="3" v-model="searchScore" />
					</view>
					<image class="input-img" src="../../static/images/XIE.png"></image>
					<view class="input-label">分</view>
				</view>
				<view class="search-btn" @tap="doSearch">查询</view>
			</view>
			<view class="label-box">
				<view class="label-item-box">
					<view class="item-left">分数</view>
					<view class="item-center">位次区间</view>
					<view class="item-right">同分人数</view>
				</view>
			</view>
		</view>
		<view class="list-box">
			<scroll-view :style="{height: deviceHeight + 'px'}" scroll-y="true" :scroll-into-view="toItem" :scroll-top="scrollTop" @scroll="scrollChange">
				<view class="scroll-item-box" v-for="item in dataList" :key="item.rankId" :id="'item'+item.rankScore">
					<view class="scroll-item">
						<view class="item-left">{{item.rankScore}}</view>
						<view class="item-center">{{item.rankSection}}</view>
						<view class="item-right">{{item.rankScoreNum}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { http, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				deviceHeight: 0,
				searchScore: '',
				scrollTop: 0,
				old: {
				  scrollTop: 0
				},
				toItem: '',
				yearIndex: 0,
				typeIndex: 0,
				yearList: [],
				typeList: ['文科', '理科'],
				dataList: [],
				reqData: {
					year: 0,
					subject: 1
				}
			}
		},
		
		onLoad() {
			this.deviceHeight = uni.getSystemInfoSync().screenHeight - 180
			this.genYearData()
			this.fetchData()
		},
		
		methods: {
			
			yearChange(e) {
				this.yearIndex = e.target.value
				this.reqData.year = this.yearList[e.target.value]
				this.fetchData()
			},
			
			typeChange(e) {
				this.typeIndex = e.target.value
				this.reqData.subject = parseInt(e.target.value) + 1
				this.fetchData()
			},
			
			scrollChange(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			
			doSearch() {
				const that = this
				let itemKey = 'item' + that.searchScore
				that.scrollTop = that.old.scrollTop
				that.$nextTick(function() {
						that.toItem = itemKey
				})
			},
			
			fetchData() {
				const that = this
				
				http('/rank/list', that.reqData).then(res => {
					if (res.code == 20000) {
						that.dataList = res.data
					}
				})
			},
			
			genYearData() {
				const date = new Date()
				let year = parseInt(date.getFullYear())
				this.reqData.year = year
				for (let i = year; i >= year - 3; i--) {
					this.yearList.push(i)
				}
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.top-box {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		background-color: #ffffff;
	}
	
	.search-box {
		width: 750rpx;
		height: 90rpx;
		border-bottom: solid 2rpx #f5f5f5;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.select-box {
		width: 190rpx;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.select-arrow {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
	
	.v-line {
		width: 2rpx;
		height: 50rpx;
		background-color: #f5f5f5;
	}
	
	.uni-input {
		font-size: 28rpx !important;
		color: #666666 !important;
	}
	
	.input-result-box {
		height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		margin-left: 60rpx;
	}
	
	.input-box {
		width: 72rpx;
		margin-bottom: 4rpx;
		border-bottom: solid 2rpx #5683ec;
	}
	
	.input-img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		margin-bottom: 4rpx;
	}
	
	.input-label {
		font-size: 28rpx;
		color: #666666;
		margin-left: 6rpx;
	}
	
	.search-btn {
		width: 90rpx;
		height: 40rpx;
		background-image: linear-gradient(90deg, #ff8604 0%, #fbb02c 100%), linear-gradient(#ffffff, #ffffff);
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: #ffffff;
		margin-left: 20rpx;
	}
	
	.label-box {
		width: 750rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.label-item-box {
		width: 680rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333333;
	}
	
	.item-left {
		width: 220rpx;
	}
	
	.item-center {
		width: 200rpx;
		text-align: center;
	}
	
	.item-right {
		width: 200rpx;
		text-align: right;
	}
	
	.list-box {
		width: 750rpx;
		height: auto;
		margin-top: 180rpx;
		z-index: -1;
	}
	
	.scroll-item-box {
		width: 750rpx;
		height: 36px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.scroll-item-box:nth-child(odd) {
		background-color: #f5f5f5;
	}
	
	.scroll-item {
		width: 680rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333333;
	}
</style>
